<template>
  <div class="shadow overflow-hidden bg-white sm:rounded-md">
    <div class="px-6 py-4 space-y-6 divide-y">
      <fieldset class="-mb-4"></fieldset>
      <fieldset>
        <legend class="font-medium text-gray-900 pr-4">Change password</legend>
        <form @submit.prevent>
          <div class="mt-4 space-y-2 max-w-sm">
            <div class="text-sm">
              <label for="password" class="font-medium text-gray-700">Old password</label>
              <input
                id="password"
                name="password"
                type="text"
                class="w-full border-gray-300 py-1 mt-1 rounded-md"
                v-model.trim="pwd.old"
                required
              />
            </div>
            <div class="text-sm">
              <label for="npassword" class="font-medium text-gray-700">New password</label>
              <input
                id="npassword"
                name="npassword"
                type="text"
                class="w-full border-gray-300 py-1 mt-1 rounded-md"
                v-model.trim="pwd.new"
                required
              />
            </div>
            <div class="text-sm">
              <label for="cnpassword" class="font-medium text-gray-700">Confirm new password</label>
              <input
                id="cnpassword"
                name="cnpassword"
                type="text"
                class="w-full border-gray-300 py-1 mt-1 rounded-md"
                v-model.trim="pwd.confirm"
                required
              />
            </div>
            <div>
              <p
                class="text-xs text-gray-400"
              >Make sure it's at least 15 characters OR at least 8 characters including a number and a lowercase letter. Learn more.</p>
              <div class="flex items-center space-x-4">
                <button
                  @click="onSubmit"
                  type="submit"
                  class="border block border-gray-300 text-gray-600 hover:bg-blue-600 hover:text-white px-2 py-1 mt-1 rounded-md"
                >Update password</button>
                <RouterLink to="/forgot" class="text-blue-600 hover:underline">I forgot my password</RouterLink>
              </div>
            </div>
          </div>
        </form>
      </fieldset>
      <fieldset>
        <legend class="font-medium text-gray-900 pr-4">Two-factor authentication</legend>
        <div class="text-center">
          <div class="flex items-center justify-center my-6">
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <use :xlink:href="'/svg/feather-sprite.svg#' + 'lock'" />
            </svg>
          </div>

          <h3 class="text-xl font-semibold">Two factor authentication is not enabled yet.</h3>
          <p
            class="text-gray-500 text-sm my-2 mx-16"
          >Two-factor authentication adds an additional layer of security to your account by requiring more than just a password to sign in.</p>
          <button
            id="del_account"
            name="del_account"
            type="button"
            class="my-4 border border-gray-300 text-gray-600 hover:bg-blue-600 hover:text-white px-2 py-1 rounded-md"
          >Enable Two factor authentication</button>
          <RouterLink to="/" class="text-blue-600 hover:underline">
            <p>Learn more</p>
          </RouterLink>
        </div>
      </fieldset>
      <fieldset>
        <legend class="text-base font-medium text-gray-900 pr-4">Sessions</legend>
        <p
          class="text-sm text-gray-500"
        >This is a list of devices that have logged into your account. Revoke any sessions that you do not recognize.</p>
        <div class="mt-4 border p-4 rounded-md divide-y">
          <div v-for="index in 4" :key="index" class="py-2">
            <div class="flex items-center">
              <span class="w-2 h-2 bg-gray-400 rounded-full" :class="{ 'bg-lime-500': index == 1 }"></span>
              <svg
                v-if="index == 1"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="mx-2"
              >
                <use :xlink:href="'/svg/feather-sprite.svg#' + 'smartphone'" />
              </svg>
              <svg
                v-else
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="mx-2"
              >
                <use :xlink:href="'/svg/feather-sprite.svg#' + 'monitor'" />
              </svg>
              <div class="mr-auto text-sm text-gray-600">
                <span>陕西西安</span>
                <span class="mx-2">111.12.12.12</span>
                <p class="text-gray-400 text-xs">{{ new Date().toLocaleString() }}</p>
              </div>
              <button
                type="button"
                class="text-gray-600 text-sm border py-1 px-2 rounded-md"
              >See more</button>
            </div>
            <span class="text-gray-500 text-sm">Seen in HK</span>
          </div>
        </div>
      </fieldset>
      <fieldset>
        <legend class="text-base font-medium text-gray-900 pr-4">OAuth2</legend>
        <div class="mt-4 space-y-4">
          <div class="flex items-start">
            <div class="flex items-center h-5">
              <input
                id="github"
                name="github"
                type="checkbox"
                class="block border-gray-300 rounded cursor-pointer"
              />
            </div>
            <div class="ml-3 text-sm">
              <label for="github" class="font-medium text-gray-700">Github</label>
              <p class="text-gray-500">{{ new Date().toString() }}</p>
            </div>
          </div>
        </div>
      </fieldset>
    </div>
  </div>
</template>


<script lang="ts" setup>
import { reactive, ref } from 'vue'

import { useRouter } from "vue-router";

import { instance, SERVER_URL } from "@/api";

const username = ref(JSON.parse(sessionStorage.getItem("account") || '').username)

const router = useRouter();

let pwd = reactive({
  old: '',
  new: '',
  confirm: ''
})

const onSubmit = async () => {
  if (!pwd.old || !pwd.new || !pwd.confirm) {
    alert("数据校验未通过！")
  } else {
    await instance.patch(SERVER_URL.account.concat("/", username.value), pwd).then(() => {
      sessionStorage.clear()
      router.replace({ path: "/signin" });
    })
  }
}
</script>